<template>
	<view class="page">
		<view class="head">
			<!-- #ifdef APP-PLUS -->
			<view class="title">购物车</view>
			<!-- #endif -->
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 购物车列表 -->
    <mescroll-body ref="mescrollRef"
                   @down="downCallback"
                   @up="upCallback"
                   :down="downOption"
                   :up="upOption"
                   :top="0">
		<view class="cart-list">
			<checkbox-group  @change="itemChange">
			<view class="list" v-for="(item,index) in productArr" :key="item.id">
				<view class="check">
					<text class="iconfont icon-check">
						<checkbox class="iconfont icon-check"
						        :value="index.toString()" 
								:checked="checkArr[index]"
						        color="#ff4d4f"
						      />
					</text>
				</view>
				<view class="goods">
					<view class="thumb">
						<image :src="`http://fast${item.image}`" mode="aspectFill"></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="two-omit">{{item.name}}</text>
						</view>
						<view class="price-num">
							<view class="price">
								<text class="min">￥</text>
								<text class="max">{{item.price}}</text>
							</view>
							<view class="num">
								<view class="add" @click="reduce(item.id)">
									<text class="iconfont icon-jian">-</text>
								</view>
								<view class="number">
									 <text>{{item.num}}  </text>
								</view>
								<view class="add" @click="add(item.id)">
									<text class="iconfont icon-jia">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			</checkbox-group>
		</view>
 
		<!-- 结算 -->
		<view class="close-account">
			<view class="check-total">
				<view class="check">
					<checkbox-group @change="changeAll">
						<checkbox label="" :checked="checkAll" value="qx"  
						class="iconfont icon-check" />
						<!-- <checkbox  v-model="checkAlls"  
						@change="changeAll" label="" value=""  
						class="iconfont icon-check" /> -->
					</checkbox-group>
					<text class="all">全选</text>
				</view>
				<view class="total">
					<text>合计：</text>
					<text class="price">￥{{totals}}</text>
				</view>
			</view>
			<view class="account">
				<view class="btn-calculate" @click="account">
					<text>结算</text>
				</view>
				
			</view>
		</view>
    </mescroll-body>
	
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
  // 引入mescroll-mixins.js
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
    mixins: [MescrollMixin], // 使用mixin
		/* components:{
			TabBar,
		}, */
		data() {
			return {
				productArr:[],
				checkAll:false,
				checkArr:[],
				totals:0,
				accounts:[],
				id:0,
				
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
			  use: false,
			  toTop: {
				src: '',
			  }
			},
			isEdit: false,
			
		
		}
	},
	 /* watch: {
	    // 监听数量变化，同步给父组件
	    num[index](newVal) {
	      this.$emit('change', newVal)
	    }
	  }, */
	onLoad(options) {
		this.id=options["id"];
		this.getProduct();
	},
    methods:{
		//结算
		account(){
			for(let i=0;i<this.checkArr.length;i++){
				if(this.checkArr[i]==true){
					if(this.accounts.length==0){
						this.accounts=[this.productArr[i]];
						
						//console.log(this.accounts);
					}else{
						this.accounts=[...this.accounts,this.productArr[i]];
						//console.log(this.accounts);
						//console.log(this.accounts.length);
						
					}
				}
			}
			uni.request({
				url:`http://fast/index/car/accountApi.html?userId=${this.id}&totals=${this.totals}&accounts=${encodeURIComponent(JSON.stringify(this.accounts))}`,
				success:res=>{
					uni.navigateTo({
						url:`/pages/cart/cart?id=${res.data}`
					})	
					//console.log(res.data);
					//console.log(`http://fast/index/car/accountApi.html?userId=${this.id}&totals=${this.totals}&accounts=${encodeURIComponent(JSON.stringify(this.accounts))}`);
				}
			})
			/* console.log(this.id);
			console.log(this.totals);
			console.log(this.accounts); */
		},
		//合计
		total(){
			 let totals=0;
			for(let i=0;i<this.checkArr.length;i++){
				if(this.checkArr[i]==true){
					totals+=this.productArr[i].price*this.productArr[i].num;
				}
			}
			this.totals= totals.toFixed(2);
		},
		//全选
		changeAll(q){
			const f=[];
			if(this.checkAll==false){
				for(let i=0;i<this.productArr.length;i++){
					f[i]=true;
				}
				this.checkAll=true;
			}else{
				for(let i=0;i<this.productArr.length;i++){
					f[i]=false;
				}
				this.checkAll=false;
			}
			this.checkArr=f;
			this.total();
		},
		itemChange(e){
			if(e.detail.value.length==this.productArr.length){
				this.checkAll=true;
			}else{
				this.checkAll=false;
			}
			const f=[];
			for(let i=0;i<e.detail.value.length;i++){
				const j=e.detail.value[i];
				f[j]=true;
			}
			this.checkArr=f;
			//console.log(this.checkArr);
			
			this.total();
		},
		getProduct(){
			uni.request({
				url:"http://fast/index/car/productApi.html",
				success:res=>{
					
					res.data.forEach(item => {
						item.num=0
					});
					this.productArr=res.data;
				}
			})
		},
		add(id){
			const item = this.productArr.find(item => item.id === id);
			if(item.num>=0){
				item.num++;
			}
			this.total()
		},
		reduce(id){
			const item = this.productArr.find(item => item.id === id);
			if(item.num>0){
				item.num--;
			}
			this.total()
		},
      /*下拉刷新的回调, 有三种处理方式:*/
      downCallback(){
        this.mescroll.endSuccess();
      },
      /*上拉加载的回调*/
      upCallback(page) {
        setTimeout(() =>{
          this.mescroll.endByPage(10, 20);
        },2000)
      },
      /**
       * 跳转点击
       * @param {String} type 跳转类型
       */
      /* onSkip(type){
        switch (type){
          case 'classify':
            uni.navigateTo({
              url: '/pages/SearchGoodsList/SearchGoodsList',
            })
            break;
          case 'goods':
            uni.navigateTo({
              url: '/pages/GoodsDetails/GoodsDetails',
              animationType: 'zoom-fade-out',
              animationDuration: 200
            })
            break;
        }
      } */
    }
	}
</script>

<style scoped lang="scss">
	@import 'cart.scss';
</style>
